<template>
    <div>
        <!--面包屑导航区-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>

        <!--卡片视图-->
        <el-card>
            <el-row>
                <el-col>
                    <el-button type="primary" @click="showAdd">添加分类</el-button>
                </el-col>
            </el-row>
            <!--表格-->
            <zk-table class="zk_table" :data="tableData"
                      :columns="columns"
                      :selection-type="false"
                      :expand-type="false"
                      show-index
                      index-text="#"
                      border
                      :show-row-hover="false">
                <template slot="sex" slot-scope="scope">
                    <i v-if="scope.row.sex === 'male'" class="el-icon-success" style="color: lightgreen;"></i>
                    <i v-else class="el-icon-error" style="color: red;"></i>
                </template>
                <template slot="score" slot-scope="scope">
                    <el-tag v-if="scope.row.score === 10">10分</el-tag>
                    <el-tag v-else-if="scope.row.score === 20" type="success">20分</el-tag>
                    <el-tag v-else type="warning">30分</el-tag>
                </template>
                <template slot="opts" slot-scope="scope">
                    <el-button type="primary" size="mini" @click="showEdit" icon="el-icon-edit">编辑</el-button>
                    <el-button type="danger" size="mini" @click="deleteRecord" icon="el-icon-delete">删除</el-button>
                </template>
            </zk-table>
            <!--分頁-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pageIndex"
                    :page-sizes="[5,10,20,50]"
                    :page-size="queryInfo.pageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>


        <!--添加分类对话框-->
        <el-dialog
                title="添加分类"
                :visible.sync="addDialogVisible"
                width="50%"
                @close="closeSetRoleForm">
            <!-- 主体区域-->
            <el-form :model="addForm" ref="addFormRef" :rules="rules" status-icon>
                <el-form-item label="分类名称" label-width="100px" prop="name">
                    <el-input v-model="addForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="父级分类" label-width="100px">
                    <el-cascader
                            ref="cascaderRef"
                            v-model="selectedParentSort"
                            :options="parentSort"
                            :props="cascaderProps"
                            @change="handleChange"
                            clearable>
                    </el-cascader>
                </el-form-item>
            </el-form>
            <!--按钮区域-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addFormSubmit">确 定</el-button>
              </span>
        </el-dialog>


    </div>
</template>

<script>
    export default {
        name: "GoodsSort",
        data() {
            return {
                tableData: [
                    {
                        name: 'Jack',
                        sex: 'male',
                        likes: ['football', 'basketball'],
                        score: 10,
                        children: [
                            {
                                name: 'Ashley',
                                sex: 'female',
                                likes: ['football', 'basketball'],
                                score: 20,
                                children: [
                                    {
                                        name: 'Ashley',
                                        sex: 'female',
                                        likes: ['football', 'basketball'],
                                        score: 20,
                                    },
                                    {
                                        name: 'Taki',
                                        sex: 'male',
                                        likes: ['football', 'basketball'],
                                        score: 10,
                                        children: [
                                            {
                                                name: 'Ashley',
                                                sex: 'female',
                                                likes: ['football', 'basketball'],
                                                score: 20,
                                            },
                                            {
                                                name: 'Taki',
                                                sex: 'male',
                                                likes: ['football', 'basketball'],
                                                score: 10,
                                                children: [
                                                    {
                                                        name: 'Ashley',
                                                        sex: 'female',
                                                        likes: ['football', 'basketball'],
                                                        score: 20,
                                                    },
                                                    {
                                                        name: 'Taki',
                                                        sex: 'male',
                                                        likes: ['football', 'basketball'],
                                                        score: 10,
                                                    },
                                                ],
                                            },
                                        ],
                                    },
                                ],
                            },
                            {
                                name: 'Taki',
                                sex: 'male',
                                likes: ['football', 'basketball'],
                                score: 10,
                            },
                        ],
                    },
                    {
                        name: 'Tom',
                        sex: 'male',
                        likes: ['football', 'basketball'],
                        score: 20,
                        children: [
                            {
                                name: 'Ashley',
                                sex: 'female',
                                likes: ['football', 'basketball'],
                                score: 20,
                                children: [
                                    {
                                        name: 'Ashley',
                                        sex: 'female',
                                        likes: ['football', 'basketball'],
                                        score: 20,
                                    },
                                    {
                                        name: 'Taki',
                                        sex: 'male',
                                        likes: ['football', 'basketball'],
                                        score: 10,
                                    },
                                ],
                            },
                            {
                                name: 'Taki',
                                sex: 'male',
                                likes: ['football', 'basketball'],
                                score: 10,
                                children: [
                                    {
                                        name: 'Ashley',
                                        sex: 'female',
                                        likes: ['football', 'basketball'],
                                        score: 20,
                                    },
                                    {
                                        name: 'Taki',
                                        sex: 'male',
                                        likes: ['football', 'basketball'],
                                        score: 10,
                                    },
                                ],
                            },
                        ],
                    },
                    {
                        name: 'Tom',
                        sex: 'male',
                        likes: ['football', 'basketball'],
                        score: 20,
                    },
                    {
                        name: 'Tom',
                        sex: 'male',
                        likes: ['football', 'basketball'],
                        score: 20,
                        children: [
                            {
                                name: 'Ashley',
                                sex: 'female',
                                likes: ['football', 'basketball'],
                                score: 20,
                            },
                            {
                                name: 'Taki',
                                sex: 'male',
                                likes: ['football', 'basketball'],
                                score: 10,
                            },
                        ],
                    },
                ],
                queryInfo: {
                    type: 3,
                    pageSize: 10,
                    pageIndex: 1,
                },
                // 总数据条数
                total: 0,
                //指定插件的列定义
                columns: [
                    {
                        label: '分类名称',
                        prop: 'name',
                        width: '400px',
                    },
                    {
                        label: '带把的 ?',
                        prop: 'sex',
                        minWidth: '50px',
                        type: 'template',
                        template: 'sex',

                    },
                    {
                        label: '分数',
                        prop: 'score',
                        type: 'template',
                        template: 'score',
                    },
                    {
                        label: '操作',
                        minWidth: '200px',
                        type: 'template',
                        template: 'opts',
                    },
                ],
                addDialogVisible: false,
                addForm: {
                    name: '',
                    pid: '',
                    // 默认一级分类
                    level: 1
                },
                rules: {
                    name: [
                        {required: true, message: '请输入分类名称', trigger: 'blur'},
                        {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                    ]
                },
                //父级分类列表
                parentSort: [
                    {
                        value: 'zhinan',
                        label: '指南',
                        children: [{
                            value: 'shejiyuanze',
                            label: '设计原则',
                            children: [{
                                value: 'yizhi',
                                label: '一致'
                            }, {
                                value: 'fankui',
                                label: '反馈'
                            }, {
                                value: 'xiaolv',
                                label: '效率'
                            }, {
                                value: 'kekong',
                                label: '可控'
                            }]
                        }, {
                            value: 'daohang',
                            label: '导航',
                            children: [{
                                value: 'cexiangdaohang',
                                label: '侧向导航'
                            }, {
                                value: 'dingbudaohang',
                                label: '顶部导航'
                            }]
                        }]
                    }, {
                        value: 'zujian',
                        label: '组件',
                        children: [{
                            value: 'basic',
                            label: 'Basic',
                            children: [{
                                value: 'layout',
                                label: 'Layout 布局'
                            }, {
                                value: 'color',
                                label: 'Color 色彩'
                            }, {
                                value: 'typography',
                                label: 'Typography 字体'
                            }, {
                                value: 'icon',
                                label: 'Icon 图标'
                            }, {
                                value: 'button',
                                label: 'Button 按钮'
                            }]
                        }, {
                            value: 'form',
                            label: 'Form',
                            children: [{
                                value: 'radio',
                                label: 'Radio 单选框'
                            }, {
                                value: 'checkbox',
                                label: 'Checkbox 多选框'
                            }, {
                                value: 'input',
                                label: 'Input 输入框'
                            }, {
                                value: 'input-number',
                                label: 'InputNumber 计数器'
                            }, {
                                value: 'select',
                                label: 'Select 选择器'
                            }, {
                                value: 'cascader',
                                label: 'Cascader 级联选择器'
                            }, {
                                value: 'switch',
                                label: 'Switch 开关'
                            }, {
                                value: 'slider',
                                label: 'Slider 滑块'
                            }, {
                                value: 'time-picker',
                                label: 'TimePicker 时间选择器'
                            }, {
                                value: 'date-picker',
                                label: 'DatePicker 日期选择器'
                            }, {
                                value: 'datetime-picker',
                                label: 'DateTimePicker 日期时间选择器'
                            }, {
                                value: 'upload',
                                label: 'Upload 上传'
                            }, {
                                value: 'rate',
                                label: 'Rate 评分'
                            }, {
                                value: 'form',
                                label: 'Form 表单'
                            }]
                        }, {
                            value: 'data',
                            label: 'Data',
                            children: [{
                                value: 'table',
                                label: 'Table 表格'
                            }, {
                                value: 'tag',
                                label: 'Tag 标签'
                            }, {
                                value: 'progress',
                                label: 'Progress 进度条'
                            }, {
                                value: 'tree',
                                label: 'Tree 树形控件'
                            }, {
                                value: 'pagination',
                                label: 'Pagination 分页'
                            }, {
                                value: 'badge',
                                label: 'Badge 标记'
                            }]
                        }, {
                            value: 'notice',
                            label: 'Notice',
                            children: [{
                                value: 'alert',
                                label: 'Alert 警告'
                            }, {
                                value: 'loading',
                                label: 'Loading 加载'
                            }, {
                                value: 'message',
                                label: 'Message 消息提示'
                            }, {
                                value: 'message-box',
                                label: 'MessageBox 弹框'
                            }, {
                                value: 'notification',
                                label: 'Notification 通知'
                            }]
                        }, {
                            value: 'navigation',
                            label: 'Navigation',
                            children: [{
                                value: 'menu',
                                label: 'NavMenu 导航菜单'
                            }, {
                                value: 'tabs',
                                label: 'Tabs 标签页'
                            }, {
                                value: 'breadcrumb',
                                label: 'Breadcrumb 面包屑'
                            }, {
                                value: 'dropdown',
                                label: 'Dropdown 下拉菜单'
                            }, {
                                value: 'steps',
                                label: 'Steps 步骤条'
                            }]
                        }, {
                            value: 'others',
                            label: 'Others',
                            children: [{
                                value: 'dialog',
                                label: 'Dialog 对话框'
                            }, {
                                value: 'tooltip',
                                label: 'Tooltip 文字提示'
                            }, {
                                value: 'popover',
                                label: 'Popover 弹出框'
                            }, {
                                value: 'card',
                                label: 'Card 卡片'
                            }, {
                                value: 'carousel',
                                label: 'Carousel 走马灯'
                            }, {
                                value: 'collapse',
                                label: 'Collapse 折叠面板'
                            }]
                        }]
                    }, {
                        value: 'ziyuan',
                        label: '资源',
                        children: [{
                            value: 'axure',
                            label: 'Axure Components'
                        }, {
                            value: 'sketch',
                            label: 'Sketch Templates'
                        }, {
                            value: 'jiaohu',
                            label: '组件交互文档'
                        }]
                    }],
                //選中的父级分类数组
                selectedParentSort: [],
                cascaderProps: {
                    expandTrigger: 'hover',
                    // 指定选中的值
                    value: 'value',
                    // 显示的值
                    label: 'label',
                    children: 'children'
                }
            }
        },
        created() {
            this.initPage();
        },
        methods: {
            initPage() {
                this.total = 50
            },
            // 弹出添加
            showAdd() {
                // 調用获取父级分类的数据列表
                this.getParentSort();
                this.addDialogVisible = true;
            },
            // 添加业务处理
            addFormSubmit() {
                // 获取当前的分类名称和分类级别加上分类ID
                // 提交后台
                this.$refs.addFormRef.validate(valid => {
                    if (!valid) {
                        return;
                    }
                    // TODO 然后发起真正的网络请求添加数据
                    this.$message.success('添加成功');
                    this.initPage();
                    this.addDialogVisible = false;
                });
            },
            // 弹出编辑
            showEdit() {

            },
            // 删除记录
            async deleteRecord() {
                const confirm = await this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err => err);
                console.log(confirm); // confirm || cancel
                if (confirm === 'confirm') {
                    this.$message.success("已确认删除");
                    this.initPage();
                } else {
                    return this.$message.info("已取消删除");
                }
            },
            closeSetRoleForm() {
                console.log(this.$refs);
                this.selectedParentSort = [];
                this.$refs.addFormRef.resetFields();
            },
            // 监听pageSize 改变
            handleSizeChange(newSize) {
                console.log(newSize);
                this.queryInfo.pageSize = newSize;
            },
            // 页码值改变的事件
            handleCurrentChange(newPage) {
                console.log(newPage);
                this.queryInfo.pageIndex = newPage;
            },
            // 获取分类
            getParentSort() {
                // TODO
            },
            // 选择器處理數據改变时间
            handleChange(value) {
                console.log(value);
            }

        }
    }
</script>

<style lang="less" scoped>
    .zk_table {
        margin-top: 15px;
    }

    .el-cascader {
        width: 100%;
    }
</style>
